import React, { Component } from "react";
interface IProps {
    name?: string;
    age: number;
}
class ClassChild extends Component<IProps,IProps> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            name: "兄弟组件",
            age: 18.5
        };
    }
    render() {
        return (
            <div>
                <h1>兄弟组件</h1>
                <p>姓名：{this.state.name}</p>
                <p>年龄：{this.props.age}</p>
            </div>
        );
    }
}
class Classcomponents extends Component<IProps,IProps> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            name: "2class 儿子组件",
            age: 18
        };
        console.log(1.1,'组件初始化时调用 ============>');
    }
    // componentWillMount() {
    //     console.log(1.2,'组件即将挂载时调用 ============>');
    // }
    componentDidMount() {
        console.log(1.3,'组件挂载完成时调用 ============>');
    }
    //update 时机
    // componentWillReceiveProps(nextProps: IProps) {
    //     console.log(2.1,'更新时机','组件接收到新的props时调用 ============>',nextProps);
    // }
    static getDerivedStateFromProps(prevProps: IProps, prevState: IProps) {
        console.log(2.1, '更新时机', '组件更新之前调用 ============>', prevProps, prevState);
        return null;
    }
    shouldComponentUpdate(nextProps: IProps, nextState: IProps) {
        console.log(2.2,'更新时机','组件判断是否需要更新时调用 ============>',nextProps, nextState);
        // 为false时，组件不会更新，为true时，组件会更新
        return true;
    }
    // componentWillUpdate(nextProps: IProps, nextState: IProps) {
    //     console.log(2.3,'更新时机','组件即将更新时调用 ============>',nextProps, nextState);
    // }
    getSnapshotBeforeUpdate(prevProps: IProps, prevState: IProps) {
        console.log(2.3,'更新时机','组件更新之前调用 ============>',prevProps, prevState);
        return null;
    }
    componentDidUpdate(prevProps: IProps, prevState: IProps, snapshot: any) {
        console.log(2.3,'更新时机','组件更新完成后调用 ============>',prevProps, prevState, snapshot);
    }
    componentWillUnmount() {
        console.log(3.1,'组件即将卸载时调用 ============>');
    }
    onClick = () => {
        console.log('点击事件');
        this.setState({
            name: "2class 儿子组件",
            age: this.state.age + 1
        });
    }
    render() {
        return (
            <div>
                <ClassChild age={this.state.age}/>
                <hr/>
                <h1>2class 儿子组件</h1>
                <p>姓名：{this.state.name}</p>
                <p>年龄：{this.state.age}<button onClick={this.onClick}>点击</button></p>
            </div>
        );
    }
}

export default Classcomponents;